<template>
    <van-sticky>
        <van-nav-bar title="首页" /> 
    </van-sticky>
    <van-icon class="start" name="star-o" @click="starts"/>
    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

    <van-skeleton v-if="pd" title avatar :row="3" :loading="loading">
   <van-skeleton-image />
</van-skeleton>

    <van-swipe v-else :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img width="100%" height="180px" :src="image.image_src" />
        </van-swipe-item>
    </van-swipe>
    <div class="lc">
        <div v-for="item in catitems">
            <img width="100%" :src="item.image_src" alt="">
        </div>
    </div>



    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

            <div v-for="item in floordata">
                <img width="100%" :src="item.floor_title.image_src" alt="">
                <div class="floor">
                    <div v-for="item in item.product_list">
                        <img width="100%" :src="item.image_src" alt="">
                    </div>
                </div>
            </div>


        </van-list>
    </van-pull-refresh>

</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import {useRouter}from 'vue-router'
const router = useRouter()

let pd=ref(true)

const images = ref([])
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(res => {
    
    setTimeout(() => {
        images.value = res.data.message
        pd.value=false
    }, 200)
})

const catitems = ref([])
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(res => {
    catitems.value = res.data.message
})

const floordata = ref([])
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata").then(res => {
    floordata.value = res.data.message
})

const starts=()=>{
    router.push('/Carts')
}

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 1000);
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
</script>

<style lang="scss" scoped>
.lc {
    display: flex;
}

.floor>div>img {
    height: 180px;
}
.start{
    margin-left: 340px;
}
</style>